<template>
  <h1>插值语法</h1>
  <h4>message: {{ message }} - isShow: {{ isShow }}</h4>
  <!-- 是个表达式 -->
  <h4>{{ counter * 10 }}</h4>
  <h4>{{ message.split('').join('-') }}</h4>
  <h4>{{ isShow ? 'isShow是true' : 'isShow是false' }}</h4>
  <h4>{{ getReverseMessage() }}</h4>

  <h2>reactive</h2>
  <h4>obj.name :{{ obj.name }}</h4>
  <h4>obj.age:{{ obj.age }}</h4>
  <h4>name:{{ name }}</h4>
  <h4>age:{{ age }}</h4>
  <h4>height:{{ obj.height }}</h4>
  <button @click="toggle">切换控制显示</button>
  <button @click="changeRef">改变ref</button>
  <button @click="changeReactive">改变reactive</button>
  <hr />
  <p>defineOptions-counter:{{ counter }}</p>
</template>

<script setup>
defineOptions({
    name: 'page-day1',
    data() {
        return {
            counter: 100
        }
    },
    created() {
        console.log('created')
    }
})
import { ref, reactive, toRefs} from 'vue'
const message = ref('Hello World')
const counter = ref(100)
const isShow = ref(true)
let obj =reactive ({
    name: '爱好者你',
    age: 18
})

// toRefs可以将一个响应式的对象转换成一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的ref
 
const { name, age} = toRefs(obj)
function toggle() {
    isShow.value = !isShow.value
    fn()
}
const fn = function () {
    console.log('fn')
}

function getReverseMessage() {
    const str = message.value.split(' ').reverse().join(' ')
  return str
}

function changeRef() {
  message.value = 'Hello Vue3'
}

function changeReactive() {
  // obj.name = '李四'
  // obj.age = 20
  // 不能直接修改reactive,将失去响应
  // obj = { name: '李四', age: 20 }
  obj = Object.assign(obj, { name: '李四', age: 20, height: 1.88 })
}
</script>

<style  lang="scss" scoped>

</style>